<template>
  <common-secondary-header title="整改要求">
    <el-form
      ref="correctForm"
      :model="createDTO"
      :validate-on-rule-change="false"
      label-width="0px"
      size="large"
      status-icon
      :disabled="disabled"
      :rules="correctiveRules"
    >
      <el-descriptions border :column="3" :class="`common-descriptions-box ${disabled ? 'is-disabled' : ''}`">
        <el-descriptions-item
          v-for="i in [1, 2, 3]"
          :key="i"
          labelClassName="w-[174px] !p-0 !border-0"
          contentClassName="!h-0 !p-0 !border-0"
        ></el-descriptions-item>
        <el-descriptions-item
          :span="3"
          labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
          :contentClassName="`flex-1 !leading-none`"
        >
          <template slot="label"><b class="isDot"></b>是否生成整改单</template>
          <el-form-item prop="hasCorrectiveForm" class="!mb-0 !mr-0">
            <el-radio-group v-model="createDTO.hasCorrectiveForm" :disabled="correctiveFormDisabled" class="pl-[16px]">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-descriptions-item>
        <template v-if="createDTO.hasCorrectiveForm == 1">
          <el-descriptions-item
            labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
            contentClassName="flex-1 !leading-none"
          >
            <template slot="label">整改单编号</template>
            <el-form-item prop="correctiveFormId" class="!mb-0 !mr-0">
              <el-input v-model="createDTO.correctiveFormId" placeholder="系统生成" readonly></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
            contentClassName="flex-1 !leading-none"
          >
            <template slot="label"><b class="isDot"></b>整改期限</template>
            <el-form-item prop="correctiveDeadline" class="!mb-0 !mr-0">
              <TDatePicker
                v-model="createDTO.correctiveDeadline"
                placeholder="请选择整改期限"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                :clearable="true"
                :disabled="disabled"
                size="large"
                class="!w-full"
              />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
            contentClassName="flex-1 !leading-none"
          >
            <template slot="label"><b class="isDot"></b>整改单位</template>
            <el-form-item prop="correctiveUnit" class="!mb-0 !mr-0">
              <DepartmentTree v-model="createDTO.correctiveUnit" placeholder="请选择整改单位" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
            contentClassName="flex-1 !leading-none"
          >
            <template slot="label"><b class="isDot"></b>整改人</template>
            <el-form-item prop="correctivePerson" class="!mb-0 !mr-0">
              <PersonSelector v-model="createDTO.correctivePerson" placeholder="请选择整改人" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
            contentClassName="flex-1 !leading-none"
          >
            <template slot="label"></template>
            <el-form-item class="!mb-0 !mr-0 pl-[16px]"></el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
            contentClassName="flex-1 !leading-none"
          >
            <template slot="label"></template>
            <el-form-item class="!mb-0 !mr-0 pl-[16px]"></el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            :span="3"
            labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
            contentClassName="flex-1 !leading-none"
          >
            <template slot="label">整改需求</template>
            <el-form-item prop="correctiveRequirement" class="!mb-0 !mr-0">
              <el-input
                v-model="createDTO.correctiveRequirement"
                type="textarea"
                placeholder="请输入整改需求"
                :maxlength="2000"
                :show-word-limit="true"
                :autosize="{ minRows: disabled ? 1 : 2, maxRows: 6 }"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </el-form>
  </common-secondary-header>
</template>

<script>
import { clone } from "xe-utils";
import PersonSelector from "@/components/PersonSelector";
import DepartmentTree from "@/components/DepartmentTree";

export default {
  name: "Corrective",
  components: {
    PersonSelector,
    DepartmentTree,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 整改要求
      createDTO: {
        id: null,
        hasCorrectiveForm: "",
        correctiveFormId: null,
        correctiveDeadline: "",
        correctiveUnit: "",
        correctivePerson: "",
        correctiveRequirement: "",
      },
      correctiveRules: {
        hasCorrectiveForm: [{ required: true, message: "请选择是否生成整改单", trigger: "change" }],
        correctiveDeadline: [{ required: true, message: "请选择整改期限", trigger: "change" }],
        correctiveUnit: [{ required: true, message: "请选择整改单位", trigger: "change" }],
        correctivePerson: [{ required: true, message: "请选择整改人", trigger: "change" }],
      },
      // 是否生成整改单是否可以编辑、提交之后的
      correctiveFormDisabled: false,
    };
  },
  methods: {
    initForm(data, isEditPage) {
      if (!data) {
        this.createDTO.hasCorrectiveForm = isEditPage ? 0 : "";
        return;
      }
      this.correctiveFormDisabled = isEditPage && data.hasCorrectiveForm == 1 ? true : false;
      Object.keys(this.createDTO).forEach((v) => {
        if (v === "correctiveUnit") {
          this.createDTO[v] = Number(data[v]);
        } else {
          this.createDTO[v] = data[v];
        }
      });
    },
    paramForm() {
      const data = clone(this.createDTO);
      return data;
    },
    validForm() {
      let validRes = true;
      this.$refs.correctForm.validate((valid, object) => {
        validRes = valid;
        if (!valid) {
          for (const key in object) {
            this.$message.error(object[key][0].message);
            return;
          }
        }
      });
      return validRes;
    },
  },
};
</script>

<style scoped lang="scss"></style>
